import React, { Component } from 'react';
// import axios from 'axios';
import { connect } from 'react-redux';
// import * as types from './store/types'

// 导入异步操作
import action from './store/action/pro'
/*
  redux异步处理：
  1. cnpm i redux-thunk
  2. 创建文件 store/action/pro.js
  3. 将异步处理放在该文件中，然后将 action 导出
  4. 应用异步模块，在 store/index.js 中做以下配置
     a. import { applyMiddleware } from 'redux'
     b. import thunk from 'redux-thunk'
     c. const store = createStore(reducer, applyMiddleware(thunk))
  5. 在组件中调用异步方法
     a. 导入异步模块 action
     b. 触发异步操作

  异步操作传递参数：
  1. 触发异步的时候可以直接调用传递参数
    getProList(){
      dispatch(action.getProListAction({limitNum: 8}))
    }
  2. 有参数的时候如何接收
    getProListAction (data) {
      console.log(data);
      return (dispatch) => {
        axios.get('/pro/list', { params: data }).then(res => {
          dispatch({ type: types.CHANGE_PRO_LIST, payload: res.data.data })
        })
      }
    }


*/

class App extends Component {

  componentDidMount(){

    this.props.getBannerList()
    this.props.getProList()

  }

  render() {
    return (
      <div>
        {this.props.bannerList.map(item => {
          return (<p key={item.bannerid}>
            <img src={item.img} style={{height: 100}} alt="" />
          </p>)
        })}

        <ol>
        {this.props.proList.map(item => {
          return (<li key={item.proid}> {item.proname} </li>)
        })}
</ol>
      </div>
    );
  }
}

// 将全局状态中的数据添加到 props 中
const mapStateToProps = (state)=>{
  return {
    bannerList: state.pro.bannerList,
    proList: state.pro.proList
  }
}

// 将修改全局状态的方法添加到 props
const mapDispatchToProps = (dispatch)=>{
  return {
    getBannerList(){
      // 触发异步事件用的
      dispatch(action.getBannerListAction)
    },
    getProList(){
      dispatch(action.getProListAction({limitNum: 8}))
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(App);
